<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%@ include file="/common/ssb/include/common-base.jsp" %>
    <title>我的佣金</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<!-- Part 一、 以下是body主体内容的模块区域 -->
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

    <!-- top start -->
    <%@include file="/common/ssb/top.jsp" %>
    <!-- top end -->
    <!-- left start -->
    <%@include file="/common/ssb/left.jsp" %>
    <!-- left end-->

    <div class="content-wrapper">
        <!-- Main start -->
        <section class="content">
            <div id="div_hidden_content" class="hidden" style="display:none;">
                <input name="templateType" type="hidden" value="all"/>
                <div id="hidden_common_final">
                    <!-- temp="hidden_common_final" start -->
                    <input name="mainObjName" type="hidden" value="ssCommissionDetail">
                    <input name="mainObjPrimaryKey" type="hidden" value="infoId">
                    <input name="objNameAll" type="hidden" value="ssCommissionDetail">
                    <!-- temp="hidden_common_final" end -->
                </div>
                <!-- temp="delForm_hidden" start -->
                <div id="delForm_hidden" style="display:none;">
                    <input type="hidden" name="pageName" value="ss-commission-detail_my"/>
                    <input type="hidden" name="formName" value="delForm"/>
                </div>
                <!-- temp="delForm_hidden" end -->
            </div>
            <div class="row">
                <div class="col-xs-12">

                    <!------搜索  start ------->
                    <div class="box box-info">
                        <!--搜索title  start -->
                        <!--搜索title  end -->
                        <div class="box-body">
                            <form id="searchForm" action="javascript:;">
                                <!-- temp="searchForm_hidden" start -->
                                <div id="searchForm_hidden" style="display:none;">
                                    <input type="hidden" name="pageName" value="ss-commission-my-search"/>
                                    <input type="hidden" name="formName" value="searchForm"/>
                                    <input type="hidden" name="ssCommissionDetail.w_userId"
                                           value="${loginUser.userId}"/>
                                </div>
                                <!-- temp="searchForm_hidden" end -->

                                <!-- temp="searchForm_content" start -->
                                <div id="searchForm_content" class="form-group" data-temp-code="true"
                                     data-temp-type="searchForm" data-temp-form-id="searchForm">

                                    <table class="table table-bordered bordercolor">
                                        <tbody>
                                        <tr>
                                            <td class="active" align="left"><span id="myMonthFree"></span></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- temp="searchForm_content" end -->
                            </form>
                        </div>
                    </div>
                    <!------- 搜索 end -------->

                    <!------- 列表 start -------->
                    <div class="box box-success">
                        <!--列表title  start -->
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-table"></i> 推广费账单
                                　　　 <%--<button id="button_to_add" onclick="toAdd();" class="btn btn-success" type="button"><i class="fa fa-plus-circle"></i> 增加 </button>--%>
                            </h3>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <table id="dataList" class="table table-bordered table-hover">
                                <thead>
                                <tr id="dataList_thead_content" data-temp-code="true" data-temp-type="table"
                                    data-temp-show="dataList_template_content">
                                    <th>序号</th>
                                    <!-- temp="dataList_thead_content" start -->
                                    <th >结算周期</th>
                                    <th >保单量</th>
                                    <th >保费(元)</th>
                                    <th >应得推广费(元)</th>
                                    <th >已提现总额(元)</th>
                                    <th>操作</th>
                                    <!-- temp="dataList_thead_content" end -->
                                </tr>
                                </thead>
                                <tbody id="dataList-body">

                                </tbody>
                            </table>
                        </div>

                        <div class="box-footer text-center">
                            <ul id="dataList-page" class="pagination">
                            </ul>
                        </div>
                    </div>
                    <!------- 列表 end -------->
                </div>
            </div>
            <div win-title="查看窗口" class="modal fade" id="my_modal_view" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="width:40%;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                ×
                            </button>
                            <h4 class="modal-title">
                                <font color="red">明细列表</font> 
                            </h4>
                        </div>
                        <div class="modal-body viewForm">

                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs" id="myTab-view2">
                                </ul>
                                <form id="searchDetailForm" action="javascript:;">
                                    <div style="display: none">
                                        <input type="hidden" name="pageName" value="ss-commission-my-detail-search">
                                        <input type="hidden" name="formName" value="searchForm">
                                        <input type="hidden" name="ssCommissionDetail.w_userId"  value="${loginUser.userId}">
                                        <input type="hidden" name="ssCommissionDetail.w_date"  class="clean">
                                    </div>
                                </form>
                                <!-- tab content start -->

                                    <div class="tab-pane active" id="tabView_2">
                                        <div class="box box-default">
                                            <!--列表title  start -->
                                            <div class="box-body">
                                                <table id="dataDetailList" class="table table-bordered table-hover">
                                                    <thead>
                                                    <tr id="dataDetailList_thead_content" data-temp-code="true" data-temp-type="table"
                                                        data-temp-show="dataDetailList_template_content">
                                                        <th>序号</th>
                                                        <!-- temp="dataDetailList_thead_content" start -->
                                                        <th >渠道商账号</th>
                                                        <th >保单量</th>
                                                        <th >保费(元)</th>
                                                        <th >应得推广费(元)</th>
                                                        <!-- temp="dataDetailList_thead_content" end -->
                                                    </tr>
                                                    </thead>
                                                    <tbody id="dataDetailList-body">

                                                    </tbody>
                                                </table>
                                            </div>

                                            <div class="box-footer text-center">
                                                <ul id="dataDetailList-page" class="pagination">
                                                </ul>
                                            </div>
                                        </div>
                                    </div>


                                <!-- tab content e -->
                            </div>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>

            <!-- Part 二、以下是template模板定义的模块区域 -->
            <script type="text/template" id="dataList-template">
                <? for ( var i = 0; i < rows.length; i++) {?>
                <tr>
                    <td><?=(pageObj.currentPage-1)*10+(i+1)?></td>
                    <td><?=strUtil.doNull(rows[i].yearmonth,'')?></td>
                    <td><?=strUtil.doNull(rows[i].num,'0')?></td>
                    <td><?=strUtil.doNull(rows[i].premium,'0.00')?></td>
                    <td><?=strUtil.doNull(rows[i].amount,'0.00')?></td>
                    <td><?=strUtil.doNull(rows[i].applymoney,'0.00')?></td>
                    <td>
                        <a href="javascript:void(0);" onclick="toLoad('<?=rows[i].yearmonth?>');">详情</a>
                    </td>
                </tr>
                <?}?>
            </script>
            <script type="text/template" id="dataDetailList-template">
                <? for ( var i = 0; i < rows.length; i++) {?>
                <tr>
                    <td><?=(pageObj.currentPage-1)*10+(i+1)?></td>
                    <td><?=strUtil.doNull(rows[i].createUser,'')?></td>
                    <td><?=strUtil.doNull(rows[i].num,'0')?></td>
                    <td><?=strUtil.doNull(rows[i].premium,'0.00')?></td>
                    <td><?=strUtil.doNull(rows[i].amount,'0.00')?></td>
                </tr>
                <?}?>
            </script>

            <!-- Part 三、 以下是js模块区域 -->
            <script>
                var clickMenu = "yjgl-my";
                var myPage, dataListId, searchFormId,dataDetailListId,searchDetailFormId;
                myPage = 10;//定义列表数据
                dataListId = "dataList";//显示列表数据div的id
                searchFormId = "searchForm";//搜索表单Id
                dataDetailListId="dataDetailList";
                searchDetailFormId="searchDetailForm";
                /**
                 * 初始化数据字典，id传入#id 返回值Map用法：dictListMap["userType"][rows[i].userType]
                 */
                var dictListMap = DictUtil.initDictAndDymic();
                <%--var userId = "${param.userId}";//"${loginUser.userId};--%>
                var userType = "${loginUser.userType}";
                var year, month;
                $(function () {
                    var myDate = new Date();
                    //获取当前年
                    year = myDate.getFullYear();
                    //获取当前月
                    var tempMonth = myDate.getMonth() +1;
                    month = tempMonth < 10 ? "0" + tempMonth : tempMonth;
                    myDate.getMonth()
                    console.log(year+"---"+month);
                    if ("broker" == userType) {
                        // $("#mySearchUserId").val(userId);
                        // getUserBalance();
                        //1、加载分页列表数据
                        getTableData();
                        //2、控制是否启用token
                        //setToken();
                    }else {
                        $("#myMonthFree").html("<font style='font-size:12pt;'>" + month + "月推广费(元): </font><font style='font-size:18pt;' color='red'>" + 0.00 + "</font>");
                    }
                });

                $(function () {
                    //设置数据行选中效果
                    $('#' + dataListId + ' tbody').on('click', 'tr', function (e) {
                        if ($(this).hasClass('selected')) {
                        } else {
                            $('tr.selected').removeClass('selected');
                            $(this).addClass('selected');
                        }
                        //var id = $('tr.selected th').eq(0).html();
                    });
                });
                //注入日历框样式
                var dateObject = $('.datepicker').datepicker({
                    language: 'zh-CN',
                    //inline: true,
                    todayBtn: "linked",
                    format: "yyyy-mm-dd",
                    autoclose: true
                }).on('hide', function (e) {
                    //bootstrap datepicker与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决方法
                    //当日期选择框关闭时，执行刷新校验。
                    var fieldName = $(this).attr("name");//获取当前元素name
                    var formId = $(this).parents("form").eq(0).attr("id");//获取当前元素所在父层级中的就近的formId
                    $("#" + formId).data('bootstrapValidator').updateStatus(fieldName, 'NOT_VALIDATED', null).validateField(fieldName);
                });

                //给模态窗口内form表单内的所有支持必填项的元素注入校验
                $(".modal").on('shown.bs.modal', function () {
                    $(this).find("form").each(function () {
                        var formId = $(this).attr("id");
                        if (!strUtil.isNull(formId)) {
                            formId = "#" + formId;
                            setValidate(formId);//定义add表单验证属性
                            mytools.cleanValidate(formId);//清空上次校验规则提示
                        }
                    });
                });

                //加载列表数据
                function getTableData() {
                    if (strUtil.isNull($("#" + searchFormId).find("input[name='pageName']").val())) {
                        return;
                    }
                    var index_load = layer.load(1, {shade: false});
                    $.ajax({
                        type: 'get',
                        url: common_list_url,
                        data: $("#" + searchFormId).serialize() + getCurrentPage(common_list_url + "?" + $("#" + searchFormId).serialize(), myPage),
                        dataType: 'json',
                        success: function (myData) {
                            console.log(myData);
                            if ("T" == myData.flag) {
                                var data = baidu.template(dataListId + "-template", eval(myData));
                                $("#" + dataListId + "-body").html(data);
                                var option = {
                                    ele: $("#" + dataListId + "-page")[0],
                                    total: myData.total,
                                    fn: getTableData,
                                    url: common_list_url + "?" + $("#" + searchFormId).serialize()
                                }
                                generatePages(option);
                                var rows=myData.rows;
                                var amount="";
                                for(var i=0;i<rows.length;i++){
                                    if(rows[i].yearmonth==year+"-"+month){
                                        amount=rows[i].amount;
                                    };
                                }
                                if("broker" == userType) {
                                    $("#myMonthFree").html("<font style='font-size:12pt;'>" + month + "月推广费(元): </font><font style='font-size:18pt;' color='red'>" + amount + "</font>");
                                }
                            }
                            layer.close(index_load);
                        }
                    });
                }
                function toLoad(date) {
                    var reqUrl2=page_admin+"/yjgl/yjgl-my-detail?userId="+'${loginUser.userId}'+"&date="+date;
                    mytools.pjax(reqUrl2);
                }


                //刷新
                function refresh() {
                    getTableData();
                }

                //设置token
                function setToken() {
                    $.ajax({
                        type: 'get',
                        url: '${ctx}/sendPage/token?token=true',
                        dataType: 'text',
                        success: function (myData) {
                            console.log(myData);
                            $('.formToken').val(myData);
                        }
                    });
                }


                /**** Part 四、以下是自定义新增方法  ****/
//1.定义校验规则-定义
                function setValidate(id) {
                    $(id).each(function () {
                        $(this).bootstrapValidator({
                            feedbackIcons: {
                                valid: 'glyphicon glyphicon-ok',
                                invalid: 'glyphicon glyphicon-remove',
                                validating: 'glyphicon glyphicon-refresh'
                            }, /** 以下需要结合实际业务清空补充个表单元素的验证规则 **/
                            fields: {
                                /** 可自定义新增验证规则
                                 "uctUser.userEname":{
		    		 validators: {
		    			 regexp: {
		    				 regexp: /^[0-9]+$/,
		                      message: '只能是数字'
		                  }
		              }
		    	}
                                 **/
                            }
                        });
                    });
                }


            </script>
        </section>
        <!-- Main end -->
    </div>
    <!-- foot start -->
    <%@include file="/common/ssb/foot.jsp" %>
    <!-- foot start -->
</div>
<!-- /.content-wrapper -->
</body>
</html>










